<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab切换调试页面</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .debug-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .debug-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .debug-log {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            padding: 10px;
            margin: 10px 0;
            font-family: monospace;
            font-size: 12px;
            max-height: 200px;
            overflow-y: auto;
        }
        .debug-button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .debug-button:hover {
            background: #0056b3;
        }
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-top: 10px;
        }
        .tab-content.active {
            display: block;
        }
        .nav-tab {
            background: #f8f9fa;
            border: 1px solid #ddd;
            padding: 10px 20px;
            cursor: pointer;
            margin-right: 5px;
            border-radius: 5px 5px 0 0;
        }
        .nav-tab.active {
            background: #007bff;
            color: white;
        }
        .nav-tab:hover {
            background: #e9ecef;
        }
        .nav-tab.active:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="debug-container">
        <h1>🔧 Tab切换调试页面</h1>
        <p>此页面用于调试tab切换功能是否正常工作</p>
        
        <div class="debug-section">
            <h3>调试控制</h3>
            <button class="debug-button" id="clearLogBtn">清空日志</button>
            <button class="debug-button" id="testAllTabsBtn">测试所有Tab</button>
            <button class="debug-button" id="checkEventListenersBtn">检查事件监听器</button>
        </div>
        
        <div class="debug-section">
            <h3>Tab切换测试</h3>
            <nav class="nav-tabs">
                <button class="nav-tab active" data-tab="tab1">Tab 1</button>
                <button class="nav-tab" data-tab="tab2">Tab 2</button>
                <button class="nav-tab" data-tab="tab3">Tab 3</button>
                <button class="nav-tab" data-tab="tab4">Tab 4</button>
            </nav>
            
            <div id="tab1-tab" class="tab-content active">
                <h4>Tab 1 内容</h4>
                <p>这是第一个标签页的内容。</p>
            </div>
            
            <div id="tab2-tab" class="tab-content">
                <h4>Tab 2 内容</h4>
                <p>这是第二个标签页的内容。</p>
            </div>
            
            <div id="tab3-tab" class="tab-content">
                <h4>Tab 3 内容</h4>
                <p>这是第三个标签页的内容。</p>
            </div>
            
            <div id="tab4-tab" class="tab-content">
                <h4>Tab 4 内容</h4>
                <p>这是第四个标签页的内容。</p>
            </div>
        </div>
        
        <div class="debug-section">
            <h3>调试日志</h3>
            <div id="debugLog" class="debug-log">
                <div>调试日志将显示在这里...</div>
            </div>
        </div>
    </div>

    <script>
        let currentTab = 'tab1';
        
        // 调试日志函数
        function debugLog(message) {
            const logContainer = document.getElementById('debugLog');
            const timestamp = new Date().toLocaleTimeString('zh-CN');
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `[${timestamp}] ${message}`;
            logContainer.appendChild(logEntry);
            logContainer.scrollTop = logContainer.scrollHeight;
        }
        
        // 清空日志
        function clearLog() {
            const logContainer = document.getElementById('debugLog');
            logContainer.innerHTML = '<div>调试日志已清空...</div>';
        }
        
        // 检查事件监听器
        function checkEventListeners() {
            debugLog('🔍 检查事件监听器...');
            
            const tabs = document.querySelectorAll('.nav-tab');
            debugLog(`找到 ${tabs.length} 个tab按钮`);
            
            tabs.forEach((tab, index) => {
                const tabName = tab.getAttribute('data-tab');
                debugLog(`Tab ${index + 1}: data-tab="${tabName}"`);
            });
            
            const tabContents = document.querySelectorAll('.tab-content');
            debugLog(`找到 ${tabContents.length} 个tab内容区域`);
            
            tabContents.forEach((content, index) => {
                const contentId = content.id;
                debugLog(`内容区域 ${index + 1}: id="${contentId}"`);
            });
        }
        
        // 测试所有Tab
        function testAllTabs() {
            debugLog('🧪 开始测试所有Tab...');
            
            const tabNames = ['tab1', 'tab2', 'tab3', 'tab4'];
            let testIndex = 0;
            
            function testNextTab() {
                if (testIndex < tabNames.length) {
                    const tabName = tabNames[testIndex];
                    debugLog(`测试Tab: ${tabName}`);
                    switchTab(tabName);
                    testIndex++;
                    setTimeout(testNextTab, 1000);
                } else {
                    debugLog('✅ 所有Tab测试完成');
                }
            }
            
            testNextTab();
        }
        
        // Tab切换函数
        function switchTab(tabName) {
            debugLog(`🔄 切换到Tab: ${tabName}`);
            
            try {
                // 隐藏所有标签页
                document.querySelectorAll('.tab-content').forEach(tab => {
                    tab.classList.remove('active');
                    debugLog(`隐藏标签页: ${tab.id}`);
                });
                
                // 移除所有标签按钮的激活状态
                document.querySelectorAll('.nav-tab').forEach(btn => {
                    btn.classList.remove('active');
                    debugLog(`移除激活状态: ${btn.getAttribute('data-tab')}`);
                });
                
                // 显示目标标签页
                const targetTab = document.getElementById(`${tabName}-tab`);
                if (targetTab) {
                    targetTab.classList.add('active');
                    debugLog(`✅ 显示标签页: ${targetTab.id}`);
                } else {
                    debugLog(`❌ 未找到标签页: ${tabName}-tab`);
                }
                
                // 激活对应的标签按钮
                const targetBtn = document.querySelector(`[data-tab="${tabName}"]`);
                if (targetBtn) {
                    targetBtn.classList.add('active');
                    debugLog(`✅ 激活按钮: ${targetBtn.getAttribute('data-tab')}`);
                } else {
                    debugLog(`❌ 未找到按钮: data-tab="${tabName}"`);
                }
                
                currentTab = tabName;
                debugLog(`✅ Tab切换完成: ${tabName}`);
                
            } catch (error) {
                debugLog(`❌ Tab切换失败: ${error.message}`);
                console.error('Tab切换错误:', error);
            }
        }
        
        // 设置事件监听器
        function setupEventListeners() {
            debugLog('🔧 设置事件监听器...');
            
            // Tab切换事件监听器
            document.querySelectorAll('.nav-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabName = this.getAttribute('data-tab');
                    debugLog(`🖱️ 点击Tab按钮: ${tabName}`);
                    switchTab(tabName);
                });
            });
            
            // 调试按钮事件监听器
            document.getElementById('clearLogBtn').addEventListener('click', clearLog);
            document.getElementById('testAllTabsBtn').addEventListener('click', testAllTabs);
            document.getElementById('checkEventListenersBtn').addEventListener('click', checkEventListeners);
            
            debugLog('✅ 事件监听器设置完成');
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            debugLog('🚀 页面加载完成，开始初始化...');
            setupEventListeners();
            checkEventListeners();
            debugLog('✅ 初始化完成');
        });
    </script>
</body>
</html>



